<template>
    <div class="component-TopBar">
        <span>学生</span>
        <span class="out-btn" @click="logout">退出</span>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "commonNav",
    computed: {
        ...mapState({}),
    },
    data: function() {
        return {
            active: "home",
        };
    },
    watch: {
        "$route.path": function(newVal) {
            this.active = newVal;
        },
    },

    mounted() {},
    methods: {
        logout() {
            this.$dialog
                .confirm({
                    title: "确认退出登录",
                })
                .then(() => {
                    this.$APIs.logout().then(data => {
                        this.$router.replace({
                            path: "/login",
                        });
                    });
                    // on confirm
                })
                .catch(() => {
                    // on cancel
                });
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.component-TopBar {
    background-color: #211728;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    padding: 8px 10px;
    align-items: center;
    .out-btn {
        color: #ff2a48;
        padding: 3px;
    }
}
</style>
